<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        function $(elementId){
            return document.getElementById(elementId);
        }
        window.onload = function (){
            findByItem(1);
        }

        function findByItem(pageNO){
            axios.get("/car/findByItem",{
                params:{pageNO,
                        startPrice:$("startPrice").value,
                        endPrice:$("endPrice").value,
                        color:$("color").value}
            }).then(e => {
                var info = e.data;
                var str = "";
                for (var i=0;i<info.list.length;i++){
                    var obj = info.list[i];
                    str += `<tr><td>${obj.type }</td><td>${obj.price}</td><td>${obj.color}</td>
                            <td><input type="button" value="删除" onclick="del(${obj.id})">
                            <a href="/html/car/update.html?id=${obj.id}">修改</a> </td></tr>`;
                }
                $('bodyData').innerHTML = str;

                var pageStr = "";
                for (var i=1;i<=info.pages;i++){
                    pageStr += `<a href="javascript:findByItem(${i})" style="margin-left: 10px">${i}</a>`
                }
                $('cutDiv').innerHTML = pageStr;
            })
        }

        function del(id){
            axios.get("/car/del",{
                params:{
                    id
                }
            }).then(e => {
                var info = e.data;
                if (info == "ok"){
                    findByItem(1);
                }
            })
        }
    </script>
</head>
<body>
    <table border="1" width="60%">
        <thead>
            <tr>
                <th>品牌</th><th>价格</th><th>颜色</th><th>操作</th>
            </tr>
        </thead>
        <tbody id="bodyData"></tbody>
    </table>
    <div id="cutDiv" style="margin-left: 10px"></div>
    <div>
        起始价格:<input type="text" id="startPrice"><br>
        结束价格:<input type="text" id="endPrice"><br>
        颜色:<select id="color">
            <option value="">不限</option>
            <option value="白色">白色</option>
            <option value="蓝色">蓝色</option>
            <option value="黑色">黑色</option>
        </select>
        <input type="button" value="查询" onclick="findByItem(1)"><br>
        <a href="/html/car/add.html">添加</a><br>
    </div>
</body>
</html>